<!--
 * @Description: 充值管理
 * @Author: 秦福凯
 * @Date: 2025-10-29 15:32:39
 * @LastEditTime: 2025-11-21 17:34:01
-->

<template v-loading="tabLaoding">
  <div class="u-search-header" >
    <el-form :model="search">
      <el-form-item  class="u-f-fl"  label="审核状态" >
        <u-select @change="getSearch" :data="stateData" v-model="search.param.search.state" style="width: 200px;" ></u-select>
      </el-form-item>
      <el-form-item  class="u-f-fl" label-width="28px">
        <u-button type="primary" icon="Search" @click="getSearch">
         搜索
        </u-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="u-search-container">
    <div class="u-h-100">
      <div class="u-btns-box">
        <u-button type="primary" plain icon="Plus" @click="add" :disabled="tabLaoding">新增</u-button>
      </div>
        <u-table @editBtnsClick="editBtnsClick" v-loading="tabLaoding" :colunm="colunm" :data="TabData"  @selection-change="(data) => TabSelData.splice(0, TabSelData.length, ...data)"></u-table>
        <div class="u-common-pagination">
          <u-page-nation @pagination="paginationE" :total="total" :page="search.param.page"></u-page-nation>
        </div>
    </div>
  </div>
  <u-rechargeDialog :dialogForm="dialogForm" :show="reSHow" @close="reSHow = false" :type="DialogType"></u-rechargeDialog>

  <!-- 查看历史充值记录 -->
  <u-dialog width="70%" :show="recordShow" title="充值记录"  @close="recordShow = false" :hideBtns="['confirm']">
    <u-table  v-loading="recordLoading" :colunm="Recordcolunm" :data="recordData"></u-table>
    <div class="u-common-pagination">
      <u-page-nation @pagination="RecordpaginationE" :total="Recordtotal" :page="searchRecord.param.page"></u-page-nation>
    </div>
    </u-dialog>
</template>

<script setup>
import { ref, reactive,onMounted} from 'vue'
// 导入接口地址
import busi_servic from '@/api/busiApi'
// 导入公共数据
import { useTecDataStore } from "@/store/teachinginstrument/index.js";
// 导入分页相关混合
import {PageMethod} from '@/components/common/mixin.ts'

// 公共数据取值
const TecDataStore = useTecDataStore()
const {page,pageSize,pageChane,} = PageMethod()

onMounted(() => {
  getSearch()
})

let DialogType = ref('add')
let reSHow = ref(false)
const typeDta = [
  {label:'管理员充值',value:1,content:'管理员充值',id:1},
  {label:'租户充值 ',value:0,content:'租户充值 ',id:0},

]

const stateData = [
  {label:'待审核 ',value:0,content:'待审核 ',id:0},
  {label:'审核拒绝',value:2,content:'审核拒绝',id:2},
  {label:'审核通过',value:1,content:'审核通过',id:1},
  {label:'已撤单',value:3,content:'已撤单',id:3},

]



// 新增
function add(){
  DialogType.value = 'add'
  reSHow.value = true
  dialogForm = {
    id:''
  }
}


// 查询相关变量
let search = reactive({
  ...TecDataStore.comObj,
  param:{
    page:page,
    pageSize:pageSize,
    search:{
      state:null,
    }
  }
})
let tabLaoding = ref(false)
let total = ref(0)
let colunm = reactive([
  // {label:'编号',key:'deviceNo',width:120},
  {label:'充值用户名称',key:'tenantUserAccount',minWidth:180,},
  {label:'状态',key:'state',width:180,ctype:'dict',dict:stateData,},
  {label:'充值类型',key:'rechargeType',width:120,ctype:'dict',dict:typeDta,},
  {label:'经办管理员用户',key:'adminUserName',width:160},

  {label:'提交时间',key:'commitDate',width:160},
  {label:'审核备注',key:'auditReason',width:220},
  {label:'操作',key:'cz',minWidth:280,ctype:'edit2',
  },
])


  const btnsList = [
    {label:'撤单',icon:'',},
    {label:'修改',icon:'Edit'},
    {label:'查看充值记录',icon:'View'},
  ]
let TabData = reactive([])

// 查询
function getSearch(){
  tabLaoding.value = true
  busi_servic.tenantRechargeListPage(search).then(res =>{
    tabLaoding.value = false
    if(res.data.code == 200){
      TabData = res.data.data.records
      total.value = res.data.data.total
         TabData.forEach(item =>{
          switch(item.state){
          case 0 :
          item.btns = btnsList.filter(v =>v.label == '查看充值记录' || v.label == '撤单')
          break
          case 1 :
          item.btns = btnsList.filter(v => v.label == '查看充值记录')
          break
          case 2 :
          item.btns = btnsList.filter(v =>  v.label == '修改' || v.label == '查看充值记录')
          break
          case 3 :
          item.btns = btnsList.filter(v =>  v.label == '修改' || v.label == '查看充值记录')
          break
        }
        })
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}

// 分页组件切换
function paginationE(val){
  search.param.page = val.page
  search.param.pageSize = val.limit
  getSearch()
}

// 表格选择的数据
let TabSelData = reactive([])


// 表格点击事件
function editBtnsClick(label,row){
  switch (label) {
    case '撤单':
    delateD(row)
    break

    case '修改':
    EditTable(row)
    break

    case'查看充值记录':
    checkRecorsd(row)
   
  }
}


  // 查看充值记录
  function checkRecorsd(row){
    recordShow.value = true
    recordLoading.value = true
    busi_servic.pointRecord(searchRecord).then(res =>{
      recordLoading.value = false
      if(res.data.code == 200){
        recordData = res.data.data.records
        Recordtotal.value = res.data.data.total
      }else{
        ElMessage.warning(res.data.msg)
      }
  })
    
  }


  // 充值记录相关
  let recordShow = ref(false)
  let recordLoading = ref(false)
  let Recordcolunm = reactive([
    {label:'编号',key:'deviceNo',width:120},
    {label:'充值时间',key:'deviceName',minWidth:160,},
    {label:'充值金额',key:'deviceNum',width:180},
  ])
  let recordData = reactive([])
  // 分页组件切换
  function RecordpaginationE(val){
    searchRecord.param.page = val.page
    searchRecord.param.pageSize = val.limit
    getRecord()
  }

  let Recordtotal = ref(0)
  let searchRecord = reactive({
    param:{
      page:page,
      pageSize:pageSize,
      search:{
      }
    }
  })

  function getRecord(){
    // recordLoading.value = true
  }
// 删除
function delateD(row){
  ElMessageBox.confirm(
    '确认撤单？',
    '系统提示',
    {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    }
  ).then(() =>{
    busi_servic.revokeRecharge({param:row.id}).then(res =>{
      if(res.data.code == 200){
        ElMessage.success(res.data.msg)
        getSearch()
      }else{
       ElMessage.warning(res.data.msg)
      }
  })
  })
}

let dialogForm = reactive({})
// 修改
function EditTable(row){
  DialogType.value = 'edit'
  reSHow.value = true
  dialogForm = row
}










  









</script>
<style >

</style>
